<template>
	<view class="big-box">
		<!-- 头部 -->
		<view class="head">
			<view class="icon" @click="onBack">
				<img src="https://img.wilmer.com.cn/admin/2024/Back.png" alt="" />
			</view>
			<view class="txt-one">
				{{major}}/{{TwoMajor}}
			</view>
			<view class="txt-two">
				{{data.name}}
			</view>
			<view class="txt-three">
				{{data.ch_name}}
			</view>
		</view>
		<!-- tap -->
		<!-- 		<view class="tap">
			<view class="tap-x" :class="flag==0?'change':''" @click="tapOne">
				专业简介
			</view>
			<view class="tap-y" :class="flag==1?'change':''" @click="tapTwo">
				院校项目
			</view>
		</view> -->
		<!-- 分割线 -->
		<view class="hr"></view>
		<!-- 111 -->
		<view class="content-x" v-if="flag==0">
			<!-- 专业定义 -->
			<view class="specialized" v-if="data.intro!==''">
				<view class="tit">
					专业定义
				</view>
				<view :class="over==0?'txt':'txt2'">
					{{data.intro}}
				</view>
				<view class="hide" v-if="over==0" @click="onOver">
					展开全部
				</view>
				<view class="hide" v-if="over==1" @click="onOverTwo">
					收起
				</view>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 专业分支 -->
			<view class="branch" v-if="data.branch[0].chineseName!==null">
				<view class="tit">
					专业分支
				</view>
				<view class="card" v-for="(item,index) in data.branch" :key="index">
					<view class="left">
						<text class="txt-one">{{item.chineseName}}</text>
						<br />
						<text class="txt-two">{{item.englishName}}</text>
					</view>
					<view class="right">
						<!-- <img src="../../static/img/Back.png" alt="" /> -->
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 经典课程 -->
			<view class="course" v-if="data.course[0].chineseName!==null">
				<view class="tit">
					经典课程
				</view>
				<view class="card" v-for="(item,index) in data.course" :key="index">
					<view class="left">
						<text class="txt-one">{{item.chineseName}}</text>
						<br />
						<text class="txt-two">{{item.englishName}}</text>
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="hr"></view>
			<!-- 岗位薪资 -->
			<view class="salary" v-if="data.salary[0].chineseName!==null">
				<view class="tit">
					岗位薪资
				</view>
				<view class="card" v-for="(item,index) in data.salary" :key="index">
					<view class="left">
						<text class="txt-one">{{item.chineseName}}</text>
						<br />
						<text class="txt-two">{{item.englishName}}</text>
					</view>
					<view class="right">
						<text class="txt-one">{{item.salary}}</text>
						<br />
						<text class="txt-two">平均年薪</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 222 -->
		<view class="content-y" v-if="flag==1">
			<view class="environment">
				<view class="left">
					<view class="title">
						<text class="txtOne">环境研究</text>
						<br />
						<text class="txtTwo">Environmental Studies</text>
					</view>
					<view class="second">
						<view class="dot">

						</view>
						<view class="word">
							2022QS世界大学建筑学专业排名
						</view>
						<view class="serial">
							5
						</view>
					</view>
				</view>
				<view class="right">
					<img src="../../static/img/qinghua.png" alt="" />
				</view>
			</view>
			<view class="card-box">
				<view class="card">
					<view class="left">
						<text class="txt-one">环境研究</text>
						<br />
						<text class="txt-two">Environmental Studies</text>
					</view>
					<view class="right">
						<!-- <img src="../../static/img/xing.png" alt="" /> -->
					</view>
				</view>
				<view class="card">
					<view class="left">
						<text class="txt-one">环境研究</text>
						<br />
						<text class="txt-two">Environmental Studies</text>
					</view>
					<view class="right">
						<!-- <img src="../../static/img/xing.png" alt="" /> -->
					</view>
				</view>
			</view>
			<view class="hr"></view>
		</view>
		<!-- foot -->
		<!-- <view class="foot">
			<view class="left">
				<img src="../../static/img/xing.png" alt="" />
				<br />
				<text class="txt">收藏</text>
			</view>
			<view class="right">
				定制我的留学方案
			</view>
		</view> -->
	</view>
</template>

<script>
	import {Getmajors} from '@/common/api/homePage.js'
	export default {
		data() {
			return {
				// 选中变色
				flag: 0,
				data: [],
				major: '',
				TwoMajor: '',
				over: 0,
				onShow:true
			}
		},
		methods: {
			tapOne() {
				this.flag = 0
			},
			tapTwo() {
				this.flag = 1
			},
			// 接口
			GetMajors(id) {
				uni.showLoading({
					title: '加载中'
				});
				Getmajors(id).then(res => {
					setTimeout(() => {
						uni.hideLoading();
					}, 500)
					setTimeout(() => {
						this.onShow=false
					}, 2500)
					this.data = res.data.data
				})
			},
			onBack() {
				uni.navigateBack()
			},
			onOver() {
				this.over = 1
			},
			onOverTwo() {
				this.over = 0
			}
		},
		onLoad(options) {
			this.major = options.Major
			this.TwoMajor = options.TwoMajor
			this.GetMajors(options.id)
		}
	}
</script>

<style lang="scss" scoped>
	.big-box {
		overflow: hidden;
	}

	.hr {
		width: 100%;
		height: 12rpx;
		background-color: #f8f8f8;
	}

	.head {
		padding: 0 40rpx 16rpx;
		width: 100%;
		height: 400rpx;
		// background: linear-gradient(to top, #ffffff, #FFF8E0);

		.icon {
			img {
				width: 40rpx;
				height: 40rpx;
				margin-top: 116rpx;
				margin-left: 24rpx;
			}
		}

		.txt-one {
			color: #666666;
			font-size: 18px;
			margin-top: 48rpx;
		}

		.txt-two {
			margin-top: 28rpx;
			font-weight: 600;
			font-size: 22px;
			color: #333333;
		}

		.txt-three {
			margin-top: 12rpx;
			font-size: 16px;
			color: #666666;
		}
	}

	.tap {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 32rpx 24rpx;
		font-size: 18px;
	}

	.content-x {
		.specialized {
			padding: 0 60rpx 30rpx;

			.txt {
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 3;
				display: -webkit-box;
				-webkit-box-orient: vertical
			}

			.txt2 {
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				line-height: 24px;
			}

			.hide {
				color: #006270;
				margin-top: 20rpx;
				text-align: center;
				font-size: 14px;
			}
		}
	}

	.tit {
		font-size: 36rpx;
		margin-top: 40rpx;
		margin-left: 12rpx;
		margin-bottom: 34rpx;
		font-weight: bold;
	}

	.branch {
		padding: 0 34rpx;

		.card {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			background-color: #FFF8E0;
			font-size: 16px;
			padding: 22rpx 46rpx;
			border-radius: 12px;

			.left {
				.txt-one {
					color: #333333;
				}

				.txt-two {
					color: #666666;
				}
			}

			.right {
				margin-top: 20rpx;

				img {
					width: 40rpx;
					height: 40rpx;
					transform: rotate(-90deg)
				}
			}
		}
	}

	.course {
		padding: 0 34rpx 30rpx;

		.card {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			background-color: #F8f8f8;
			font-size: 16px;
			padding: 22rpx 46rpx;
			border-radius: 12px;

			.left {
				.txt-one {
					color: #333333;
				}

				.txt-two {
					color: #666666;
				}
			}
		}
	}

	.salary {
		padding: 0 34rpx 600rpx;

		.card {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			background-color: #F8F8F8;
			font-size: 16px;
			padding: 22rpx 46rpx;
			border-radius: 12px;

			.left {
				.txt-one {
					color: #333333;
				}

				.txt-two {
					color: #666666;
				}
			}

			.right {
				.txt-one {
					color: #006270;
					font-size: 14px;
				}

				.txt-two {
					color: #999999;
					font-size: 12px;
					margin-top: 6rpx;
				}
			}
		}
	}

	.foot {
		width: 100%;
		height: 168rpx;
		position: fixed;
		border-top: 1px solid #ccc;
		background-color: #fff;
		bottom: 0;
		display: flex;
		padding: 10rpx 68rpx;
		justify-content: space-between;

		.left {
			width: 88rpx;
			height: 88rpx;
			border: 1px solid #D5D5D5;
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			// margin-top: 10rpx;

			.txt {
				color: #999999;
				font-size: 12px;
				margin-top: -500rpx;
			}

			img {
				margin-bottom: -20rpx;
				width: 50rpx !important;
				height: 50rpx !important;
			}
		}

		.right {
			width: 440rpx;
			height: 80rpx;
			background-color: #00d000;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			font-size: 16px;
			border-radius: 50px;
			margin-top: 10rpx;
			margin-right: 90rpx;
		}
	}

	.change {
		color: #00d000;
	}

	.content-y {
		padding-bottom: 500rpx;

		.environment {
			padding: 40rpx 34rpx;
			display: flex;
			justify-content: space-between;

			.left {
				.txtOne {
					font-size: 16px;
					font-weight: 500;
					color: #333333;
					margin-bottom: 6rpx;
				}

				.txtTwo {
					font-size: 16px;
					font-weight: 400;
					color: #666666;
				}

				.second {
					display: flex;
					margin-top: 28rpx;

					.dot {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #00d000;
						margin-top: 12rpx;
					}

					.word {
						font-size: 16px;
						font-weight: 400;
						margin-left: 8rpx;
						margin-right: 8rpx;
					}

					.serial {
						width: 40rpx;
						height: 34rpx;
						background-color: #EEFFEE;
						color: #00d000;
						line-height: 34rpx;
						text-align: center;
						font-size: 12px;
						margin-top: 8rpx;
					}
				}
			}

			.right {
				margin-right: 50rpx;
				margin-top: 30rpx;

				img {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		.card-box {
			padding: 20rpx 34rpx;

			.card {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				background-color: #F2FFF2;
				font-size: 16px;
				padding: 22rpx 46rpx;
				border-radius: 12px;

				.left {
					.txt-one {
						color: #333333;
					}

					.txt-two {
						color: #666666;
					}
				}

				.right {
					margin-top: 20rpx;

					img {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
	}

</style>